<template>
    <div style="" class="main" v-if="nodes.indexOf('3')!=-1">
      <!-- 时间选择 -->
      <div class="datetype">
        <div class="dated">
          <el-tabs type="border-card" v-model="thisQuery.tabPosition" @tab-click="handleClickAll">
            <el-tab-pane label="全部" name="1"></el-tab-pane>
            <el-tab-pane label="本周" name="2"></el-tab-pane>
            <el-tab-pane label="本月" name="3"></el-tab-pane>
            <el-tab-pane label="本季度" name="4"></el-tab-pane>
            <el-tab-pane label="全年" name="5"></el-tab-pane>
          </el-tabs>
        </div>
  
        <div class="block" style="width:350px;float:left">
          <!-- <span class="demonstration">自定义：</span> -->
          <el-date-picker v-model="thisQuery.defaultDate" @change="handleClickAll" type="daterange"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
        <!-- 卡片统计 -->
    <div class="card_box" v-bind:style="[{backgroundImage:'url('+ (card.img[index]) +')'}]"
      v-for="(item,index) in card.list" :key="index">
      <div class="card_title">{{item.title}}</div>
      <div class="all_count"><span class="all_count_num">{{item.no}}</span>{{item.unit}}</div>
      <div class="cardlists">
        <el-row>
          <el-col :span="12"><span>{{item.foot_one}}&nbsp;</span><span class="numm">{{item.all}}</span></el-col>
          <el-col :span="12" style="text-align:center"><span>{{item.foot_two}}&nbsp;</span><span
              class="numm">{{item.refuse}}</span></el-col>
          
        </el-row>
      </div>
    </div>
      
      <!-- 饼状图 门店统计-->
      <div class="one_pie_box">
        <div class="title2">各门店数据统计</div>
       
        <hr class="hr" />
        <div id="chartPieCity" class="pie-wrap"></div>
      </div>
      <div class="one_pie_box">
        <div class="title2">各门店排名统计</div>
        <el-tabs v-model="CityRankingData.label" style="margin-top:15pt;margin-left:5%;margin-right:5%"
          @tab-click="cityRank">
          <!-- <el-tab-pane label="进件数" name="1"></el-tab-pane> -->
          <el-tab-pane label="签约数" name="1"></el-tab-pane>
          <el-tab-pane label="总租金" name="2"></el-tab-pane>
          <el-tab-pane label="总放款" name="3"></el-tab-pane>
          <el-tab-pane label="总利润" name="4"></el-tab-pane>
        </el-tabs>
        <div class="rank">
          <div class="gd">
            <el-tabs v-model="CityRankingData.type" @tab-click="cityRank">
              <el-tab-pane label="全部" name="1"></el-tab-pane>
              <el-tab-pane label="本周" name="2"></el-tab-pane>
              <el-tab-pane label="本月" name="3"></el-tab-pane>
              <el-tab-pane label="本季度" name="4"></el-tab-pane>
              <el-tab-pane label="全年" name="5"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="defualt">
            <el-date-picker @change="cityRank" v-model="CityRankingData.defaultDate" type="daterange"
              start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </div>
        </div>
        <div class="list_box">
          <div class="lis" v-for="(item,index) in CityRankingData.list" :key="index">
            <el-row style="height:100%">
              <el-col :span="2">
                <div class="num " v-bind:class="[{'firstt':index==0},{'second':index==1},{'third':index==2}]">{{index+1}}
                </div>
              </el-col>
              <el-col :span="17">{{item.city_name}}</el-col>
              <el-col :span="5" style="text-align:right">{{item.number}}</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!-- 饼状图 产品统计-->
      <div class="one_pie_box">
        <div class="title2">产品统计</div>
        
        <hr class="hr" />
        <div id="chartPieMerchant" class="pie-wrap"></div>
      </div>
      <div class="one_pie_box">
        <div class="title2">各产品排名统计</div>
        <!-- <div>
            <el-select v-model="rankingdata.city" placeholder="选择城市" filterable class="filter-item" style="width:130px;margin-top:8px" @change="getRegionList">
              <el-option label="请选择城市"  value="" />
              <el-option
                v-for="item in city"
                :key="item.city"
                :label="item.name"
                :value="item.city"
              />
            </el-select>
          </div> -->
        <el-tabs v-model="MerchantRankingData.label" style="margin-top:15pt;margin-left:5%;margin-right:5%"
          @tab-click="merchantRank">
          <!-- <el-tab-pane label="进件数" name="8"></el-tab-pane> -->
          <el-tab-pane label="签约数" name="1"></el-tab-pane>
          <el-tab-pane label="总租金" name="2"></el-tab-pane>
          <el-tab-pane label="总放款" name="3"></el-tab-pane>
          <el-tab-pane label="总利润" name="4"></el-tab-pane>
        </el-tabs>
        <div class="rank">
          <div class="gd">
            <el-tabs v-model="MerchantRankingData.type" @tab-click="merchantRank">
              <el-tab-pane label="全部" name="1"></el-tab-pane>
              <el-tab-pane label="本周" name="2"></el-tab-pane>
              <el-tab-pane label="本月" name="3"></el-tab-pane>
              <el-tab-pane label="本季度" name="4"></el-tab-pane>
              <el-tab-pane label="全年" name="5"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="defualt">
            <el-date-picker @change="merchantRank" v-model="MerchantRankingData.defaultDate" type="daterange"
              start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </div>
        </div>
        <div class="list_box">
          <div class="lis" v-for="(item,index) in MerchantRankingData.list" :key="index">
            <el-row style="height:100%">
              <el-col :span="2">
                <div class="num " v-bind:class="[{'firstt':index==0},{'second':index==1},{'third':index==2}]">{{index+1}}
                </div>
              </el-col>
              <el-col :span="17">{{item.city_name}}</el-col>
              <el-col :span="5" style="text-align:right">{{item.number}}</el-col>
            </el-row>
          </div>
        </div>
      </div>
      
     
  
    </div>
  </template>
  
  <script>
    import {
      formatDate
    } from '@/utils/formatDate.js';
    import png1 from '@/assets/images/1.png';
    import png2 from '@/assets/images/2.png';
    import png3 from '@/assets/images/3.png';
    import png4 from '@/assets/images/4.png';
    import png5 from '@/assets/images/5.png';
    import png6 from '@/assets/images/6.png';
    import * as echarts from 'echarts';
    import {
      getNodes
    } from '@/utils'
    require('echarts/theme/macarons'); //引入主题
    require('echarts/theme/shine'); //引入主题
    import {
      getRegion,
      getMainDatas,
      cityRank,
      merchantRank,
      saleRank
    } from '@/api/finance'
    export default {
      data() {
        return {
          card: {
            img: [png1, png2, png3, png4, png5, png6],
            list: []
          },
          nodes: [],
          city: [],
          activeName: '2',
          CityRankingData: {
            city: '',
            label: '1',
            type: '1',
            defaultDate: '',
            list: []
          },
          MerchantRankingData: {
            merchant: '',
            label: '1',
            type: '1',
            defaultDate: '',
            list: []
          },
          SaleRankingData: {
            sale: '',
            label: '1',
            type: '1',
            defaultDate: '',
            list: []
          },
          thisQuery: {
            tabPosition: '3',
            defaultDate: '',
          },
          chartPie: null,
          chartLine: null,
          chartColumnar: null,
          value: '',
          start: '',
          legendY: '20%',
          legendX: '15%',
          pie_color: ['#1890FF', '#36CBCB', '#975FE5', '#F2637B', '#FBD437', '#4ECB73', '#34E7C9', '#39ACE9', '#F1B919',
            '#EE7953', '#E872AC', '#FD948E',
          ],
          one: {
            allmoney: '15689.5', //总金额
            no_paid_money: '1589.5', //未还
            paid_money: '15689.5', //已还
            yql: '11', //逾期率
            data_x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            data_y: [0, 0, 0, 0, 0, 0, 0],
            interval: 0
          },
          two: {
            allmoney: '15689.5', //总金额
            first_should: '1589.5', //首次应付
            first_paid: '15689.5', //首次已付
            fen_should: '158263', //分期应付
            fen_paid: '87961', //分期已付
            data_x: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            data_y: [0, 0, 0, 0, 0, 0, 0],
          },
          three: {
            interval: 0,
            should_pay: [100, 100, 10, 10, 10, 10, 10],
            should_get: [20, 30, 40, 50, 60, 70, 70],
            // labels:['本金','利息','滞纳金','毛利润'],
  
            benjin: [0, 0, 0, 0, 0, 0, 0], //本金
            late_free: [0, 0, 0, 0, 0, 0, 0], //滞纳金
            money_rate: [0, 0, 0, 0, 0, 0, 0], //利息
            profit: [0, 0, 0, 0, 0, 0, 0], //毛利润
  
          },
          four: {
            legend: ['意得利 ', '万众', '旷世', '德阳'],
            title: '销售额',
            element: 'chartPieCity',
            all_creditor: '0',
            all_order: '0',
            all_rate: '0',
            all_server: '0',
            all_project_money: '0',
            series_data: [{
                value: 335,
                name: '意得利'
              },
              {
                value: 310,
                name: '万众'
              },
              {
                value: 234,
                name: '旷世'
              },
              {
                value: 135,
                name: '德阳'
              },
            ]
          },
          five: {
            legend: ['双黑', '过户', '二次'],
            title: '商户级别',
            element: 'chartPieMerchant',
            legendY: '20%',
            legendX: '15%',
            series_data: [{
                value: 35,
                name: '双黑'
              },
              {
                value: 46,
                name: '过户'
              },
              {
                value: 17,
                name: '二次'
              } 
            ],
            countall: 0,
            new: 0,
            no_check: 0
          },
          six: {
            legend: ['正常', '买断', '绿通'],
            title: '销售额',
            element: 'chartPieSale',
            legendY: '35%',
            legendX: '8%',
            all_creditor: '0',
            all_order: '0',
            all_rate: '0',
            all_server: '0',
            series_data: [{
                value: 0,
                name: '正常'
              },
              {
                value: 0,
                name: '买断'
              },
              {
                value: 0,
                name: '绿通'
              },
            ],
          },
        }
      },
      mounted() {
        this.$nextTick(() => {
  
  
          this.drawPieChart(this.four);
          this.drawPieChart(this.five);
          this.drawColumnar(this.thisQuery);
        })
      },
      created() {
        this.getRegionList();
        this.getMainDatas();
        this.cityRank();
        this.merchantRank();
        this.saleRank();
        this.nodes = getNodes()
      },
  
      methods: {
        getMainDatas() {
          getMainDatas(this.thisQuery).then(res => {
            this.four = res.data.four;
            this.five = res.data.five;
            this.card.list = res.data.card_data;
            this.four.element = 'chartPieCity';
            this.four.title = '销售额';
            this.five.element = 'chartPieMerchant';
            this.five.title = '商户级别';
            this.drawPieChart(this.four);
            this.drawPieChart(this.five);
          })
        },
  
        cityRank() {
          cityRank(this.CityRankingData).then(res => {
            this.CityRankingData.list = res.data;
          })
        },
        merchantRank() {
          merchantRank(this.MerchantRankingData).then(res => {
            this.MerchantRankingData.list = res.data;
          })
        },
        saleRank() {
          saleRank(this.SaleRankingData).then(res => {
            this.SaleRankingData.list = res.data;
          })
        },
        drawPieChart(datas) {
          let mytextStyle = {
            color: "#333",
            fontSize: 15,
            lineHeight: 20
          };
          let mylabel = {
            show: true,
            position: "right",
            offset: [30, 40],
            formatter: '{b} : {c} ({d}%)',
            textStyle: mytextStyle
          };
          this.chartPie = echarts.init(document.getElementById(datas.element), 'macarons');
          this.chartPie.setOption({
           
            grid: [{
              left: '50',
              bottom: '10',
              top: '10',
              right: '10'
            }],
            color: this.pie_color,
            legend: {
              itemWidth: 15,
              itemHeight: 15,
              textStyle: mytextStyle,
              icon: "circle",
              orient: "vertical",
              right: this.legendX,
              height: "auto",
              itemGap: 5,
              // x:'right',      //可设定图例在左、右、居中
              y: 'center', //可设定图例在上、下、居中
              padding: [0, 40, 40, 10], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
              data: datas.legend,
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              normal: {
  
              }
            },
            series: [{
              //name: '访问来源',
              type: 'pie',
              radius: ['0%', '50%'],
              center: ['40%', '45%'],
              data: datas.series_data,
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {
                emphasis: mylabel,
                position: 'inner',
                show: false,
              },
              itemStyle: {
                normal: {
                  borderWidth: 8,
                  /*隔开的白色边界*/
                  borderColor: '#fff',
                  /*border*/
                  labelLine: {
                    show: false
                  }
                },
              },
            }]
          });
        },
        drawLineOneChart() {
          this.chartLine = echarts.init(document.getElementById('chartLineOne'), 'shine'); // 基于准备好的dom，初始化echarts实例
          let option = {
            tooltip: {
              trigger: 'axis'
            },
            // legend: {
            //     data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
            // },
            calculable: true,
            // 设置折线图的大小
            // grid:{
            //     x:20,
            //     y:5,
            //     x2:5,
            //     y2:20,
            //     borderWidth:1
            // },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
                interval: 10, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
                rotate: 0 // 横坐标上label的倾斜度
              },
              show: false,
              axisTick: {
                show: false
              },
              data: this.one.data_x,
              axisLabel: {
                interval: this.one.interval, //每四个点显示一个标签
              }
            }],
            yAxis: [{
              type: 'value',
              show: false,
              max: Math.max.apply(null, this.one.data_y),
              min: 0,
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              }, //去除网格线
            }],
  
            series: [{
              // name:'邮件营销',
              type: 'line',
              stack: '总量',
              data: this.one.data_y,
              smooth: true,
              areaStyle: {
                normal: {
                  // color: '#091e3b', //改变区域颜色
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#5FC1BB' // 0% 处的颜色
                  }, {
                    offset: 0.5,
                    color: '#ceecea' // 100% 处的颜色
                  }, {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }]), //背景渐变色
                }
              },
              itemStyle: {
                normal: {
                  color: "#5FC1BB",
                  lineStyle: {
                    color: "#5FC1BB"
                  }
                }
              },
            }, ],
            grid: {
              left: "5%",
              right: "5%"
            }
          };
          // 使用刚指定的配置项和数据显示图表
          this.chartLine.resize(); //直接加这句即可
          this.chartLine.setOption(option);
        },
        drawLineTwoChart() {
          this.chartLine = echarts.init(document.getElementById('two_line'), 'shine'); // 基于准备好的dom，初始化echarts实例
          let option = {
            tooltip: {
              trigger: 'axis',
              backgroundColor: "#fff",
              borderColor: "#eee",
              borderWidth: 1,
              textStyle: 'color:#eee;font-size:12px;',
              extraCssText: "width:120px;",
              padding: [20, 150, 20, 20],
            },
            legend: {
              data: ['应收金额', '应付金额']
            },
            color: ['#1890FF', '#2FC25B', '#fff', '#fff', '#fff', '#fff'],
            calculable: true,
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              axisLabel: { //  如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
                interval: 10, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
                rotate: 0 // 横坐标上label的倾斜度
              },
              axisTick: {
                show: false
              },
              data: this.one.data_x,
              axisLabel: {
                interval: this.one.interval, //每四个点显示一个标签
              }
            }],
            yAxis: {
              type: 'value',
              min: 0, // y轴最小刻度值
              max: Math.max.apply(null, this.one.data_y),
              splitLine: {
                lineStyle: {
                  color: ['#eee'], // 设置网格线颜色
                  width: 1, // 设置网格线宽度
                  type: 'solid' // 设置网格虚线(dashed)、实线(solid)
                },
                show: true // 是否显示网格线
              },
              axisLine: {
                lineStyle: {
                  // 设置y轴颜色
                  color: '#555666',
                  type: 'solid'
                }
              },
            },
  
            series: [{
                name: '应收金额',
                type: 'line',
                data: this.one.data_y,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: "#1890FF"
                    }
                  }
                },
                emphasis: { // 高亮
                  label: {
                    show: true,
                    textStyle: {
                      color: '#333333',
                      fontWeight: 'bold'
                    }
                  }
                }
              },
              {
                name: '应付金额',
                type: 'line',
                data: this.two.data_y,
                show: false,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: "#2FC25B",
                    }
                  }
                },
              },
              {
                name: '本金',
                type: 'line',
                data: this.three.benjin,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: "rgba(0, 0, 0, 0)",
                    }
                  }
                },
              },
              {
                name: '利息',
                type: 'line',
                data: this.three.money_rate,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: "rgba(0, 0, 0, 0)",
                    }
                  }
                },
              },
              {
                name: '滞纳金',
                type: 'line',
                data: this.three.late_free,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: "rgba(0, 0, 0, 0)",
                    }
                  }
                },
              },
              {
                name: '毛利润',
                type: 'line',
                data: this.three.profit,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: "rgba(0, 0, 0, 0)",
                    }
                  }
                },
              },
            ],
            grid: {
              left: "7%",
              right: "5%"
            }
          };
          // 使用刚指定的配置项和数据显示图表
          this.chartLine.resize(); //直接加这句即可
          this.chartLine.setOption(option);
        },
        drawColumnar() {
          // 实例化echarts对象
          this.chartColumnar = echarts.init(document.getElementById('Columnar'), 'shine'); // 基于准备好的dom，初始化echarts实例
          // 绘制条形图
          var option = {
            // X轴
            tooltip: {
              trigger: 'axis'
            },
            calculable: true,
            xAxis: {
              show: false,
              data: this.two.data_x
            },
            // Y轴
            yAxis: {
              show: false,
            },
            // 数据
            series: [{
                // name: '衣服',
                type: 'bar',
                data: this.two.data_y,
                itemStyle: {
                  normal: {
                    color: "#1890FF",
                    lineStyle: {
                      color: "#1890FF"
                    }
                  }
                },
              },
  
            ]
          };
  
          this.chartColumnar.setOption(option);
        },
        getRegionList() {
          getRegion(this.rankingdata).then(response => {
            this.city = response.data
          })
        },
        handleClickAll(tab, event) {
          this.getMainDatas();
        },
      }
    }
  </script>
  
  <style scope>
    .card_box {
      width: 30%;
      background: #fff;
      border-radius: 8pt;
      margin-top: 24pt;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 200px;
      margin-top: 24pt;
      margin-left: 2%;
      float: left;
      color: #fff;
      position: relative;
    }
  
    .card_title {
      top: 8.5%;
      left: 8.5%;
      font-size: 14px;
      position: absolute;
    }
  
    .all_count {
      top: 30%;
      left: 8.5%;
      font-size: 14px;
      position: absolute;
    }
  
    .all_count_num {
      font-weight: 700;
      font-size: 38px;
    }
  
    .cardlists {
      width: 83%;
      height: 23.4%;
      top: 76.5%;
      left: 8.5%;
      position: absolute;
      border-top: 1px solid #e8e8e8;
      line-height: 44pt;
      font-size: 14px;
    }
  
    .numm {
      font-weight: 600;
    }
  
    .rank {
      width: 90%;
      margin-left: 5%;
      /* border:1px solid red */
    }
  
    .gd {
      width: 50%;
      float: left;
      color: #555658;
      font-size: 14px;
      cursor: pointer;
    }
  
    .defualt {
      width: 50%;
      float: left;
    }
  
    .gdchoose1 {
      color: #1890FF
    }
  
    .gd .el-tabs__nav-wrap::after {
      background-color: #fff !important;
    }
  
    .el-date-editor--daterange.el-input,
    .el-date-editor--daterange.el-input__inner,
    .el-date-editor--timerange.el-input,
    .el-date-editor--timerange.el-input__inner {
      width: 100% !important;
    }
  
    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      color: #1890FF;
      background-color: #fff;
    }
  
    .el-tabs--border-card {
      box-shadow: none;
      border: none;
      width: 348pt;
      height: 24pt;
      border: 1px solid #eee
    }
  
    .el-tabs--border-card>.el-tabs__header {
      border-bottom: none;
      background-color: #fff
    }
  
    .el-tabs--border-card>.el-tabs__header .el-tabs__item {
      border: #DCDFE6 1px solid;
      width: 70pt;
      text-align: center;
    }
  
    /* .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{border:#1890ff 1px solid;} */
    .el-range-editor--medium.el-input__inner {
      height: 30pt;
      margin-top: 1px;
      border-radius: 0;
    }
  
    .list_box {
      width: 90%;
      margin-left: 5%;
      height: 260pt;
      margin-top: 40pt;
      overflow: auto;
    }
  
    .list_box::-webkit-scrollbar {
      width: 2pt;
    }
  
    .list_box::-webkit-scrollbar-thumb {
      width: 2pt;
      background: #D9EDFF;
    }
  
    .list_box::-webkit-scrollbar-button {
      display: none
    }
  
    .lis {
      width: 100%;
      height: 40pt;
      border: 1px solid #fff;
      line-height: 40pt;
      font-size: 15px;
      color: #555658;
      border-bottom: 1px solid #e8e8e8;
    }
  
    .num {
      width: 20px;
      height: 20px;
      background: #F0F2F5;
      margin-top: 13pt;
      line-height: 20px;
      ;
      color: #555658;
      border-radius: 20px;
      text-align: center;
    }
  
    .firstt {
      background: #FFD13B;
      color: #fff;
    }
  
    .second {
      background: #ECECDB;
      color: #fff;
    }
  
    .third {
      background: #E6812F;
      color: #fff;
    }
  
    .main {
      width: 100%;
      height: 1150pt;
      background: #F0F2F5;
      padding-top: 24pt;
      font-size: 12pt;
      color: #000;
    }
  
    .datetype {
      width: 100%;
      height: 32pt;
      margin-left: 2%;
    }
  
    .dated {
      width: 370pt;
      height: 100%;
      float: left;
      border: 1px solid #eee
    }
  
    .dated .el-tabs__content {
      display: none;
    }
  
    .dated .el-tabs__nav-scroll {
      width: 370pt;
    }
  
    .grid-content {
      border: 1px solid #ccc;
      cursor: pointer;
      height: 32pt;
      line-height: 32pt;
      text-align: center;
    }
  
    .pie-wrap {
      width: 100%;
      height: 350pt;
    }
  
    .title {
      color: #86888b;
      font-size: 15px;
      margin-left: 5%;
    }
  
    .title2 {
      color: #1890FF;
      font-size: 15px;
      margin-left: 5%;
    }
  
    .allmoney {
      color: #242526;
      font-size: 18px;
      margin-left: 5%;
      margin-top: 8pt;
      font-weight: 800;
    }
  
    .one_line_box {
      width: 46%;
      background: #fff;
      border-radius: 2pt;
      padding-top: 20pt;
      height: 188pt;
      margin-top: 24pt;
      margin-left: 2%;
      float: left;
    }
  
    .two_line_box {
      width: 94%;
      background: #fff;
      border-radius: 2pt;
      height: 276pt;
      margin-top: 24pt;
      margin-left: 2%;
      float: none
    }
  
    .one_pie_box {
      width: 46%;
      background: #fff;
      border-radius: 2pt;
      height: 404pt;
      margin-top: 24pt;
      margin-left: 2%;
      float: left;
      padding-top: 24pt;
    }
  
    .one_line,
    .line-columnar {
      width: 100%;
      height: 58pt;
    }
  
    .two_line {
      width: 100%;
      height: 100%;
    }
  
    .hr {
      width: 90%;
      margin-left: 5%;
      margin-top: 16pt;
      border: #e8e8e8 1px solid
    }
  
    .datas {
      width: 90%;
      margin-left: 5%;
      margin-top: 20pt;
    }
  
    .datas2 {
      width: 90%;
      margin-left: 5%;
      margin-top: 16pt;
      line-height: 20px;
    }
  
    .labels {
      color: #86888b;
      font-size: 14px;
    }
  
    .jenos {
      color: #212121;
      font-size: 14px;
      font-weight: 600;
    }
  
    .jenos2 {
      color: #86888b;
      font-size: 14px;
    }
  
    .clear {
      clear: both;
    }
  </style>
  